﻿<template>
  <div>
    <span style="padding: 10px;font-size:18px!important;text-align: center;height: auto;line-height: normal;">
              <i v-if="id" :class="id"></i>
              <i v-else>无</i>
            </span>
    <el-popover
        placement="right"
        width="600"
        v-model="showPopview"
        trigger="manual">
      <div style="height:300px;overflow: auto;">
        <el-col span="3" v-for="icon in iconList"
                style="font-size:18px!important;text-align:center;padding: 10px;height: auto;line-height: normal;"
                :class="id==icon?'el-menu-item is-active':'el-menu-item'"
                @click.native="id=icon,showPopview=false">
          <i :class="icon"></i>
        </el-col>
      </div>
      <span  slot="reference">
              <el-input style="width:300px;" v-model="id" autocomplete="off" clearable></el-input>
                &nbsp;&nbsp;<el-button type="primary" size="small" @click="showPopview=true">选择
              </el-button>
              </span>

    </el-popover>
  </div>
</template>
<script>
function noop() {
}

export default {
  name: "IconPicker",
  props: {
    //选中值
    value: {},

    //是否禁用
    disabled: {
      type: Boolean,
      default: false
    },

    //是否只读
    readonly: {
      type: Boolean,
      default: false,
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      isLoading: true,
      showPopview: false,
    }
  },
  computed: {
    id: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("change", value);
      }
    }
  },

  mounted() {
  },
  methods: {
    showSelectIconProp: function () {
      // if (this.menuDlgVisible == false) {
      //   this.showPopview = false;
      // }
      return this.showPopview;
    },
  },
};
</script>
